<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
      <script src="./three.js"></script>
      <!-- 加入控件来控制鼠标操作 -->
      <script src="./OrbitControls.js"></script>
  </head>
  <body>
    <script>
      //创建一个场景对象
      var scene = new THREE.Scene()

      //创建一个网格模型
      let geometry1 = new THREE.BoxGeometry(200,100,100)
      let material1 = new THREE.MeshLambertMaterial({
        color:0xff0000
      })

      let mesh1 = new THREE.Mesh(geometry1,material1)//创建完成
      //添加到场景中
      scene.add(mesh1)

      //创建另一个结合体
      let geometry2 = new THREE.SphereGeometry(60, 40,40)
      let material2 = new THREE.MeshLambertMaterial({color:0xf45400})
      let mesh2 = new THREE.Mesh(geometry2,material2)
      mesh2.translateY(120)
      scene.add(mesh2)

      //创建另一个结合体
      let geometry3 = new THREE.IcosahedronGeometry(50)
      let material3 = new THREE.MeshLambertMaterial({color:0xeeeeee})
      let mesh3 = new THREE.Mesh(geometry3,material3)
      mesh3.translateX(150)
      scene.add(mesh3)


      //创建一个点光源
      let point = new THREE.PointLight(0xffffff)
      point.position.set(400,200,300)//设置位置
      scene.add(point)

      //创建一个环境光源
      let ambient = new THREE.AmbientLight(0x444444)
      //注意：环境光源不用添加位置
      scene.add(ambient)
      //以上就完成了对场景要素的添加


      // 辅助坐标系
      var axisHelper = new THREE.AxisHelper(250);
      scene.add(axisHelper);


      //创建一个相机对象

      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)
      camera.position.set(300,300,300)
      camera.lookAt(scene.position)
      console.log(scene.position)
      console.log(123)

      let renderer = new THREE.WebGLRenderer()
      renderer.setSize(width,height)
      renderer.setClearColor(0xb9d3ff, 1)
      document.body.appendChild(renderer.domElement)

      //旋转函数
      function render(){
          renderer.render(scene,camera)
          mesh1.rotation.y +=0.01
          mesh2.rotation.y +=0.01
          mesh3.rotation.y +=0.01
          // camera.rotation.z += 0.01
          requestAnimationFrame(render)
      }

      render()

      //实现鼠标操作
      let controls = new THREE.OrbitControls(camera)
      //添加渲染函数
      controls.addEventListener('change',render())





    </script>
  </body>
</html>
